<!-- eslint-disable vue/multi-word-component-names -->
<template>
	<div class="login">
		<AnimeHead></AnimeHead>
		<div class="login1">
			<div class="a">
				<div>
					<el-button type="text" :class="{ b: login }" @click="a()"
						>密码登录</el-button
					>
					<el-button type="text" :class="{ b: !login }" @click="a()"
						>短信登录</el-button
					>
				</div>
				<div v-if="login">
					<el-input
						v-model="userName"
						placeholder="账号名/邮箱/手机号"
						prefix-icon="el-icon-s-custom"
					></el-input>
					<el-input
						v-model="password"
						placeholder="请输入登录密码"
						show-password
						prefix-icon="el-icon-lock"
					></el-input>
					<el-input
						v-model="captcha"
						placeholder="验证码"
						prefix-icon="iconfont icon-mimazhaohuiyanzhengma"
					></el-input>
					<el-button type="text" @click="userNameLogin">登录</el-button>
					<router-link to="sign" class="sign">免费注册</router-link>
					<ValidCode @input="createValidCode" class="code" />
				</div>
				<div v-if="!login" class="c">
					<el-input
						v-model="phone"
						placeholder="请输入手机号"
						prefix-icon="el-icon-mobile-phone
"
					></el-input>
					<el-input
						v-model="captcha"
						placeholder="请输入验证码"
						prefix-icon="iconfont icon-mimazhaohuiyanzhengma
"
					></el-input>
					<el-button type="text" class="e" @click="phoneLogin">登录</el-button>
					<router-link to="sign" class="sign">免费注册</router-link>
					<el-button type="text" class="d" @click="getCode"
						>{{ isNaN(captchaName) ? captchaName : captchaName + 's' }}
					</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import AnimeHead from '@/components/front/AnimeHead.vue'
	import ValidCode from '@/components/front/ValidCode.vue'
	import isValid from '@/js/isValid'
	export default {
		components: { AnimeHead, ValidCode },
		data() {
			return {
				userName: '',
				password: '',
				login: true,
				validCode: '',
				captcha: '',
				captcha1: '',
				phone: '',
				captchaName: '获取验证码',
			}
		},
		methods: {
			a() {
				this.login = !this.login
				this.captcha = ''
			},
			createValidCode(data) {
				this.validCode = data
			},
			//手机号登录
			async phoneLogin() {
				let b = this.verify()
				if (b) {
					let res = await this.$api.sort.login({ phone: this.phone.trim() })
					if (res.data.code != 1) {
						this.$message.error(res.data.msg)
						return
					}
					localStorage.setItem('token', res.data.data)
					this.$message.success('登录成功！')
					let res1 = await this.$api.sort.test()
					if (res1.data.code == 1) {
						this.$cookies.set('user', res1.data.data)
					}
					this.$router.push({ path: '/' })
				}
			},
			//用户名登录
			async userNameLogin() {
				if (!this.userName.trim()) {
					this.$message.error('用户名不能为空')
					return
				}
				if (!this.password.trim()) {
					this.$message.error('密码不能为空')
					return
				}
				if (!this.captcha.trim()) {
					this.$message.error('验证码不能为空')
					return
				}
				if (this.captcha != this.validCode) {
					this.$message.error('验证码不正确')
					return
				}
				let res = await this.$api.sort.login({
					userName: this.userName.trim(),
					password: this.password.trim(),
				})
				if (res.data.code != 1) {
					this.$message.error(res.data.msg)
					return
				}
				localStorage.setItem('token', res.data.data)
				this.$message.success('登录成功！')
				let res1 = await this.$api.sort.test()
				if (res1.data.code == 1) {
					this.$cookies.set('user', res1.data.data)
				}
				this.$router.push({ path: '/' })
			},

			// 获取验证码
			async getCode() {
				let res = await this.$api.sort.getCode()
				if (res.data.code === 1) {
					this.captcha1 = res.data.data
					this.captcha = this.captcha1
					this.captchaName = 60
					// 更新倒计时的显示
					var countdown = setInterval(() => {
						// 在页面上显示剩余时间
						this.captchaName -= 1
						// 如果倒计时结束，清除 interval
						if (this.captchaName < 1) {
							this.captchaName = '获取验证码'
							this.captcha1 = ''
							this.captcha = ''
							clearInterval(countdown)
						}
					}, 1000) // 每秒钟更新一次倒计时
				}
			},
			//验证手机号
			verify() {
				if (this.phone.trim() === '') {
					this.$message.error('请输入手机号')
					return
				} else {
					let a = isValid.isvalidPhone(this.phone.trim())
					if (!a) {
						this.$message.error('请输入正确的手机号')
						return
					}
				}
				if (this.captcha1 === '') {
					this.$message.error('请获取验证码')
					return
				} else {
					if (this.captcha !== '') {
						if (this.captcha !== this.captcha1) {
							this.$message.error('验证码错误')
							return
						}
					} else {
						this.$message.error('请输入验证码')
						return
					}
				}
				return true
			},
		},
	}
</script>

<style scoped lang="less">
	a {
		color: #787878;
		text-decoration: none;
	}
	.login1 {
		width: 800px;
		height: 500px;
		background-color: white;
		background-repeat: no-repeat;
		text-align: center;
		padding-top: 100px;
		margin:  auto;
	}
	.login1 img {
		width: 200px;
		height: 100px;
        border-radius: 50%;
		object-fit: cover;
		overflow: hidden;
	}
	.a .el-input {
		width: 300px;
		height: 100px;
		display: block;
		margin-left: 300px;
		margin-top: 20px;
	}
	/deep/ .a div:nth-child(1) .el-button {
		color: #000;
		width: 120px;
		font-size: 25px;
		margin-left: 20px;
		padding-bottom: 3px;
		text-decoration: none;
		background-color: transparent;
	}
	.b {
		border-bottom: 2px solid black;
	}
	.a div:nth-child(2) {
		margin-top: -40px;
	}
	.a div:nth-child(2) .el-input:nth-child(2) {
		margin-top: -45px;
	}
	.a div:nth-child(2) .el-input:nth-child(3) {
		width: 300px;
		margin-top: -45px;
	}
	/deep/ .el-input__prefix {
		height: 40px;
		width: 40px;
		background-color: #cccccc;
		color: #ffff;
		margin-left: -6px;
		border-radius: 2px;
		font-size: 25px;
	}
	/deep/ .el-input__inner {
		text-indent: 10px;
	}
	/deep/.c .d {
		background-color: transparent;
		color: #ff7449;
		position: relative;
		top: -100px;
		left: -182px;
		height: 40px;
		width: 60px;
	}
	/deep/ .el-button {
		background-color: #ff4400;
		width: 300px;
		margin-left: 160px;
		position: relative;
		top: -40px;
		color: white;
	}
	.c .e {
		left: 110px;
	}
	.a .sign {
		position: relative;
		left: 30px;
		top: 20px;
	}
	/deep/.el-input__inner:focus {
		border-color: #c0c4cc; /* 修改聚焦时的边框颜色 */
		box-shadow: 0 0 3px #c0c4cc; /* 修改聚焦时的阴影效果 */
	}
	//iconfont样式
	/deep/ .iconfont {
		height: 40px;
		width: 40px;
		position: relative;
		border-radius: 2px;
		display: block;
		background-color: #cccccc;
		color: #ffff;
		font-size: 26px;
	}

	//验证码
	.code {
		position: relative;
		top: -140px;
		left: 490px;
	}
</style>
